<template>
    <div v-if="good" class="good-detail">
        <myhead :title="$route.query.name" :back="true" ></myhead>
        <div class="good-detail-box">
            <van-image :src="good.img" class="good-img" ></van-image>

            <van-cell-group>
                <van-cell title="分类"   :value="good.type.text"  />
                <van-cell title="折扣率(折)"     :value="good.discount" />
                <van-cell  title="单价(元)"   :value="good.price"  />
                <van-cell title="购买数量"   >
                    <template #extra>
                        <van-stepper min="1" max="100" v-model.number="count"></van-stepper>     
                    </template>
                </van-cell>
                <van-cell title="购买总价"  :value="good.price * count * good.discount / 10 "  />
            </van-cell-group>
            <van-goods-action>
                <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
                <van-goods-action-icon icon="cart-o" text="购物车" />
                <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
                <van-goods-action-button type="warning" text="加入购物车" @click="addToShopCar" />
                <van-goods-action-button type="danger" text="立即购买" @click="gotocartlist" />
            </van-goods-action>
        </div>
    </div>
</template>


<script>
export default {
    data(){
        return {
            good:null,
            count:1
        }
    },
    methods:{
        addToShopCar(){

        },
        gotocartlist(){

        }
    },
    mounted(){
        this.$ajax.getGoodDetail(this.$route.params.gid)
        .then(res=>{
            this.good =  res.data
        })
    }
}
</script>

<style lang="scss" scoped>
.good-detail{
    height:100%;
    overflow: auto;
    &-box{
        width:100%;
        height:100%;
        padding:15px;

        .good-img{
            width:100%;
            height:250px;
        }
    }
}
</style>
